import { Pie, Column, RadialBar, Line, Bar, Gauge, Area, DualAxes } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { Spin } from 'antd'

const changeOpacity = colorString => {
    // 检查颜色字符串是否是 rgba 格式
    if (colorString.startsWith('rgba(') && colorString.endsWith(')')) {
        // 将字符串中的最后一个参数从 1 改为 0
        const colorArr = colorString.substring(5, colorString.length - 1).split(', ')
        colorArr[3] = '0'

        // 构建新的颜色字符串
        const newColorString =
            'rgba(' + colorArr[0] + ', ' + colorArr[1] + ', ' + colorArr[2] + ', ' + colorArr[3] + ')'

        return newColorString
    } else {
        // 如果字符串不是 rgba 格式，则返回原始字符串
        return colorString
    }
}

// 饼图
export const PieTemplate = ({ size, data, color }) => {
    const charts = {
        data,
        angleField: 'value',
        colorField: 'type',
        width: size,
        height: size,
        radius: 1,
        color,
        label: {
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
                fontSize: 14,
                textAlign: 'center',
            },
        },
        tooltip: false,
        legend: false,
        interactions: [{ type: 'element-active' }],
    }

    return <Pie {...charts} />
}

// 环图
export const AnnularTemplate = ({ size, data, color, title }) => {
    const { width, height } = size
    const number = data.reduce((total, { value }) => total + value, 0)
    const config = {
        width,
        height,
        data,
        angleField: 'value',
        colorField: 'type',
        color,
        radius: 1,
        innerRadius: 0.7,
        interactions: [{ type: 'element-default' }],
        label: false,
        tooltip: false,
        legend: false,
        statistic: {
            title: {
                offsetY: 5,
                style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                content: number.toString(),
            },
            content: {
                offsetY: 10,
                style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                content: title || '',
            },
        },
        pieStyle: { lineWidth: 0 },
    }

    return <Pie {...config} />
}

export const ColumnStyle = {
    ColumnColor:
        'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    isStack: false,
    isGroup: true,
    smallTitle: false,
}

// 柱图
export const ColumnConfigA01Template = ({ size, data, style, click }) => {
    const { width, height } = size
    const {
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        isStack,
        isGroup,
        smallTitle,
        tipDefinition,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        maxColumnWidth: ColumnWidth,
        appendPadding: 16,
        data,
        isStack,
        isGroup,
        xField: 'type',
        yField: 'value',
        seriesField: 'name',
        color: ColumnColor.split('&'),
        label: {
            position: 'middle',
            layout: [{ type: 'interval-adjust-position' }, { type: 'interval-hide-overlap' }, { type: 'adjust-color' }],
        },
        tooltip: smallTitle
            ? {
                  formatter: e => {
                      const { name, value, type } = e
                      const small = data.find(v => v.type === type && v.name === name)[smallTitle.file]
                      const Rvalue = smallTitle.file ? `${value} ( ${small} )` : value
                      return { name, value: Rvalue }
                  },
              }
            : tipDefinition
            ? {
                  showMarkers: false,
                  enterable: true,
                  domStyles: tipDefinition.config,
                  customContent: (title, items) => {
                      const Template = tipDefinition.temp
                      return <Template title={title} items={items} />
                  },
              }
            : {},

        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            tickCount: YNumber,
            label: { style: { fill: YColoc } },
            title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
        },
        scrollbar: BarStatus
            ? {
                  height: BarHeight,
                  categorySize: BarWidth,
                  style: { trackColor: BarTrack, thumbColor: BarThumb, thumbHighlightColor: BarHover },
              }
            : false,
        animation: false,
    }

    return (
        <Column
            {...config}
            onReady={plot =>
                plot.on('plot:click', e => {
                    const { x, y } = e
                    const charts = plot.chart.getTooltipItems({ x, y })
                    if (click && charts.length !== 0) {
                        const [{ data }] = charts
                        click(data)
                    }
                })
            }
        />
    )
}

export const LineStyle = {
    ColumnColor:
        'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    YMin: 200,
}

// 折现图
export const LineConfigA01Template = ({ size, data, style, click }) => {
    const { width, height } = size
    const {
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        YMin,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        maxColumnWidth: ColumnWidth,
        appendPadding: 16,
        data,
        isGroup: true,
        xField: 'type',
        yField: 'value',
        seriesField: 'name',
        color: ColumnColor.split('&'),
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            tickCount: YNumber,
            label: { style: { fill: YColoc } },
            title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
            min: YMin || 0,
        },
        scrollbar: BarStatus
            ? {
                  height: BarHeight,
                  categorySize: BarWidth,
                  style: { trackColor: BarTrack, thumbColor: BarThumb, thumbHighlightColor: BarHover },
              }
            : false,
        animation: {
            appear: {
                animation: 'fade-in',
                duration: 350,
            },
        },
    }

    return (
        <Line
            {...config}
            onReady={plot =>
                plot.on('plot:click', e => {
                    const { x, y } = e
                    const charts = plot.chart.getTooltipItems({ x, y })
                    if (click && charts.length !== 0) {
                        const [{ data }] = charts
                        click(data)
                    }
                })
            }
        />
    )
}

// 旭日
export const RadialBarConfigA01Template = ({ data, style }) => {
    const { color } = style
    const config = {
        data,
        xField: 'type',
        yField: 'value',
        maxAngle: 300,
        //最大旋转角度,
        radius: 0.8,
        innerRadius: 0.5,
        tooltip: { formatter: ({ value }) => ({ name: '长度(km)', value: value }) },
        colorField: 'type',
        color: ({ type }) => `l(270) 0.6:${color[type]} 1:${changeOpacity(color[type])}`,
        barBackground: {},
        barStyle: { lineCap: 'round' },
        annotations: [
            {
                type: 'html',
                position: ['50%', '50%'],
                html: () => {
                    return `<div style="transform:translate(-50%,-46%);color:white">
                    <div>长度</div>
                    <div>(km)</div>
                </div>`
                },
            },
        ],
    }
    return <RadialBar {...config} />
}

export const BarStyle = {
    ColumnColor:
        'l(180) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(180) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(180) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    isStack: true,
    isGroup: true,
}

// 条形图
export const BarConfigA01Template = ({ size, data, style, click }) => {
    const { width, height } = size
    const {
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        isStack,
        isGroup,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        maxBarWidth: ColumnWidth,
        appendPadding: 16,
        data,
        xField: 'value',
        yField: 'type',
        seriesField: 'name',
        color: ColumnColor.split('&'),
        isStack,
        isGroup,
        tooltip: {
            formatter: e => {
                const { name, value } = e
                return { name, value }
            },
        },

        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
            grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
        },
        yAxis: {
            label: { style: { fill: YColoc } },
            title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            // grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
            line: false,
        },
        scrollbar: BarStatus
            ? {
                  height: BarHeight,
                  categorySize: BarWidth,
                  style: { trackColor: BarTrack, thumbColor: BarThumb, thumbHighlightColor: BarHover },
              }
            : false,
    }

    return <Bar {...config} />
}

// 半环
export const GaugeA01Template = ({ size, data, click, title, color }) => {
    const { width, height } = size

    const config = {
        autoFit: false,
        width,
        height,
        percent: Number(data),
        radius: 0.9,
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
        indicator: null,
        statistic: {
            title: {
                offsetY: -25,
                style: { fontSize: '35px', color: color || '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
            },
            content: {
                style: { fontSize: '16px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                formatter: () => title || '整改率',
            },
        },
        gaugeStyle: { lineCap: 'round' },
    }

    return (
        <Gauge
            {...config}
            onReady={plot =>
                plot.on('plot:click', e => {
                    click()
                })
            }
        />
    )
}

export const GaugeStyle = {
    color: ['l(0) 0:#ADEEBA 1:#F28159', 'rgba(58, 168, 226, 0.2)'],
    title: '',
    unit: '',
    radius: 0.9,
    Rwidth: 24,
}
export const GaugeA02Template = ({ size, data, click, style }) => {
    const { width, height } = size
    const { color, title, unit, radius, Rwidth } = style

    const config = {
        autoFit: false,
        width,
        height,
        percent: Number(data),
        radius,
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        range: { color, width: Rwidth },
        indicator: null,
        statistic: {
            title: {
                offsetY: -25,
                style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}${unit}`,
            },
            content: {
                style: { fontSize: '16px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                formatter: () => title,
            },
        },
        gaugeStyle: { lineCap: 'round' },
    }

    return (
        <Gauge
            {...config}
            onReady={plot =>
                plot.on('plot:click', e => {
                    click && click(e)
                })
            }
        />
    )
}

export const AreaStyle = {
    color: 'rgba(68, 255, 244, 1)',
    ColumnColor: 'l(270) 0:rgba(204, 248, 255, 1) 1:rgba(204, 248, 255, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    isStack: true,
    isGroup: true,
}

// 面积图
export const AreaA01Template = ({ size, data, style, click }) => {
    const { width, height } = size

    const {
        color,
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        maxColumnWidth: ColumnWidth,
        appendPadding: 16,
        data,
        isGroup: true,
        xField: 'type',
        yField: 'value',
        seriesField: 'name',
        color,
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            tickCount: YNumber,
            label: { style: { fill: YColoc } },
            title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
        },
        scrollbar: BarStatus
            ? {
                  height: BarHeight,
                  categorySize: BarWidth,
                  style: { trackColor: BarTrack, thumbColor: BarThumb, thumbHighlightColor: BarHover },
              }
            : false,
        animation: false,
        areaStyle: () => {
            return {
                fill: ColumnColor,
            }
        },
    }

    return <Area {...config} />
}

export const DualAxesStyle = {
    color: 'rgba(68, 255, 244, 1)',
    ColumnColor: 'l(270) 0:rgba(204, 248, 255, 1) 1:rgba(204, 248, 255, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    isStack: true,
    isGroup: true,
}

// 柱折
export const DualAxesA1Template = ({ size, data, style, click }) => {
    const { width, height } = size
    const {
        color,
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTitleB,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        value,
        count,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        appendPadding: 16,
        data: [data, data],
        xField: 'type',
        yField: [value, count],
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            [value]: {
                tickCount: YNumber,
                label: { style: { fill: YColoc } },
                title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
                grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
            },
            [count]: {
                label: { style: { fill: YColoc } },
                title: { text: YTitleB, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            },
        },

        geometryOptions: [
            {
                geometry: 'column',
                color: 'l(180) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)',
                maxColumnWidth: ColumnWidth,
            },
            {
                geometry: 'line',
                color: 'rgba(65, 150, 255, 1)',
            },
        ],
    }

    return <DualAxes {...config} />
}

// 双折
export const DualAxesA02Template = ({ size, data, style, click }) => {
    const { width, height } = size

    const {
        color,
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitleValue,
        YTitleCount,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        value,
        count,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        appendPadding: 16,
        data: [data, data],
        xField: 'type',
        yField: [value, count],
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            [value]: {
                tickCount: YNumber,
                label: { style: { fill: YColoc } },
                title: {
                    text: YTitleValue,
                    position: YPosi,
                    autoRotate: YAuto,
                    offset: YOffset,
                    style: { fill: YTColor },
                },
                grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
            },
            [count]: {
                label: { style: { fill: YColoc } },
                title: {
                    text: YTitleCount,
                    position: YPosi,
                    autoRotate: YAuto,
                    offset: YOffset,
                    style: { fill: YTColor },
                },
            },
        },

        geometryOptions: [
            {
                geometry: 'line',
                smooth: true,
                color: 'rgba(250, 235, 136, 1)',
            },
            {
                geometry: 'line',
                smooth: true,
                color: 'rgba(136, 235, 250, 1)',
            },
        ],
    }

    return <DualAxes {...config} />
}
// 双柱 + 折
export const DualAxesA03Template = ({ size, A01, A02, style, click }) => {
    const { width, height } = size

    const {
        colorA,
        colorB,
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitleValue,
        YTitleCount,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
        value,
        count,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        appendPadding: 16,
        data: [A01, A02],
        xField: 'type',
        yField: [value, count],
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            [value]: {
                tickCount: YNumber,
                label: { style: { fill: YColoc } },
                title: {
                    text: YTitleValue,
                    position: YPosi,
                    autoRotate: YAuto,
                    offset: YOffset,
                    style: { fill: YTColor },
                },
                grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
            },
            [count]: {
                label: { style: { fill: YColoc } },
                title: {
                    text: YTitleCount,
                    position: YPosi,
                    autoRotate: YAuto,
                    offset: YOffset,
                    style: { fill: YTColor },
                },
            },
        },
        geometryOptions: [
            {
                geometry: 'column',
                isGroup: true,
                seriesField: 'name',
                color: colorA.split('&'),
                maxColumnWidth: ColumnWidth,
            },
            {
                geometry: 'line',
                color: colorB,
            },
        ],
    }

    return <DualAxes {...config} />
}

// 噪音进度
export const NoiseGauge = ({ size, data, color }) => {
    const { width } = size
    const text = {
        color: data <= 40 ? color[0] : data <= 80 ? color[1] : color[2],
        title: data <= 40 ? '噪音较低' : data <= 80 ? '噪音正常' : '噪音较大',
    }
    const parameter = {
        autoFit: false,
        width: width - 100,
        height: width - 100,
        percent: data / 120 || 0,
        type: 'meter',
        innerRadius: 0.76,
        range: { ticks: [0, 1 / 3, 2 / 3, 1], color },
        axis: { label: { style: { fill: '#44AFCA' }, formatter: v => Number(v) * 120 }, subTickLine: { count: 5 } },
        indicator: { pointer: { style: { stroke: '#fff' } }, pin: { style: { stroke: '#ccc' } } },
        statistic: {
            title: { style: { fontSize: '32px', color: '#fff' }, formatter: () => `${data || 0}db` },
            content: { offsetY: 30, style: { fontSize: '24px', color: text.color }, formatter: () => text.title },
        },
    }

    return <Gauge {...parameter} />
}

// 面积图
export const AreaEnvironment = ({ size, data, style, active }) => {
    const { width, height } = size
    const [Data, setData] = useState([])

    useEffect(() => {
        setData([])
        const nameList = {
            pm25: 'PM2.5',
            pm10: 'PM10',
            windSpeed: '风速',
            temperature: '温度',
            humidity: '湿度',
            windLevel: '风级',
        }
        console.log(data.map(item => ({ name: nameList[active], type: item.createTime, value: item[active] })))
        setData(data.map(item => ({ name: nameList[active], type: item.createTime, value: item[active] })))
    }, [active, data])

    const {
        color,
        ColumnWidth,
        ColumnColor,
        ColumnLegend,
        LegendPossion,
        LegendoffsetY,
        Legendfill,
        LegendfontSize,
        XLine,
        XLabel,
        XTick,
        YTitle,
        YTColor,
        YPosi,
        YAuto,
        YOffset,
        YColoc,
        YNumber,
        YGrid,
        BarStatus,
        BarHeight,
        BarWidth,
        BarTrack,
        BarThumb,
        BarHover,
    } = style

    const config = {
        autoFit: false,
        width,
        height,
        maxColumnWidth: ColumnWidth,
        appendPadding: 16,
        data: Data,
        isGroup: true,
        xField: 'type',
        yField: 'value',
        seriesField: 'name',
        color,
        legend: ColumnLegend
            ? {
                  position: LegendPossion,
                  offsetY: LegendoffsetY,
                  itemName: { style: { fill: Legendfill, fontSize: LegendfontSize } },
              }
            : false,
        xAxis: {
            label: { style: { fill: XLabel } },
            line: { style: { stroke: XLine } },
            tickLine: { style: { stroke: XTick } },
        },
        yAxis: {
            tickCount: YNumber,
            label: { style: { fill: YColoc } },
            title: { text: YTitle, position: YPosi, autoRotate: YAuto, offset: YOffset, style: { fill: YTColor } },
            grid: { line: { style: { stroke: YGrid, lineDash: [8, 2] } } },
        },
        scrollbar: BarStatus
            ? {
                  height: BarHeight,
                  categorySize: BarWidth,
                  style: { trackColor: BarTrack, thumbColor: BarThumb, thumbHighlightColor: BarHover },
              }
            : false,
        animation: false,
        areaStyle: () => {
            return {
                fill: ColumnColor,
            }
        },
    }

    if (Data.length > 0) {
        return <Area {...config} />
    } else {
        return <Spin />
    }
}
